<template>
  <ScalablePage>
    <div class="big-screen aqgl flex-between" style="width: 480px; overflow: hidden;">
      <!-- 屏幕左边 -->

      <div class="screen-left">
        <div class="safe-risks">
          <div class="screen-title-container-l1">
            <img src="@/assets/aqgl/screen-title01.png" alt="" class="screen-title" />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="risks-top flex-between">
            <img class="risks-icon" src="@/assets/aqgl/risks-icon.png" alt="" />
            <div class="risks-title">本月安全风险总数</div>
            <div class="risks-info">
              <span class="risks-value">{{ fenxi.total }}</span>
              <span class="risks-unit">个</span>
            </div>
          </div>
          <div class="level-all">
            <div class="level-1">
              <p>一级风险</p>
              <p>{{ fenxi.level1 === 0 ? "暂无风险" : fenxi.level1 }}</p>
            </div>
            <div class="level-2">
              <p>二级风险</p>
              <p>{{ fenxi.level2 === 0 ? "暂无风险" : fenxi.level2 }}</p>
            </div>
            <div class="level-3">
              <p>三级风险</p>
              <p>{{ fenxi.level3 === 0 ? "暂无风险" : fenxi.level3 }}</p>
            </div>
            <div class="level-4">
              <p>四级风险</p>
              <p>{{ fenxi.level4 === 0 ? "暂无风险" : fenxi.level4 }}</p>
            </div>
          </div>
        </div>
        <div class="emergency-plan" style="margin-top: 80px;">
          <div class="screen-title-container-l1">
            <img src="@/assets/aqgl/screen-title02.png" alt="" class="screen-title" />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="flex-center plan-main">
            <div class="plan-left">
              <div class="plan-title">应急预案总数</div>
              <div class="plan-value">{{ yingji.total }}个</div>
              <img src="@/assets/aqgl/emergency-plan-icon.png" alt="" class="plan-icon" />
            </div>
            <div class="plan-list">
              <!-- <div
                class="plan-option"
                v-for="(item, index) in yingji.each"
                :key="item?.name"
              >
                <div class="option-top flex-between">
                  <div class="option-title">{{index + 1}}、{{ item?.name }}</div>
                  <div class="option-value">
                    {{ item?.value }}<span class="option-unit">个</span>
                  </div>
                </div>
                <div class="option-bar-v2" :style="{backgroundColor:getRandomHexColor()}"></div>
              </div> -->
              <div class="scroll-table" style="height: 300px; margin-top: 60px; width: 300px;">
                <table class="device-report-table" style="font-size: 11px;">
                  <tbody>
                    <tr class="plan-option" v-for="(item, index) in yingji.each" :key="item?.name">
                      <div class="option-top flex-between">
                        <div class="option-title"
                          style="font-weight: 600;font-size: 16px; color: #f8f8f8; width: 212px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
                          {{ index + 1 }}、{{ item?.name }}</div>
                        <div class="option-value">
                          {{ item?.value }}<span class="option-unit">个</span>
                        </div>
                      </div>
                      <div class="option-bar-v2" :style="{ backgroundColor: getRandomHexColor() }"></div>
                    </tr>
                  </tbody>
                </table>
              </div>


            </div>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件自适应

import { onMounted, toRefs, reactive } from "vue";
import {
  emergencyPlanAPI,
  nummergencyPlansAPI,
  totalNumRisksAPICOPY,
} from "@/utils/shuiwu/api";

const state = reactive({
  fenxi: {
    total: 0,
    level1: 0,
    level2: 0,
    level3: 0,
    level4: 0,
  },
  yingji: {
    total: 0,
    each: [],
  },
});

let { fenxi, yingji } = toRefs(state);

// 随机颜色
function getRandomHexColor(): string {
  const color = Math.floor(Math.random() * 0xffffff).toString(16);
  return `#${color.padStart(6, '0')}`;
}


onMounted(() => {
  getFengXianTotal();
  getYJTotal();
  getYJEach();
});

// 风险总数 / 风险级别
function getFengXianTotal() {
  totalNumRisksAPICOPY().then((res) => {
    state.fenxi.total = res.data[res.data.length - 1].value;
    if (res.data.length !== 0) {
      let sum = res.data.reduce(
        (prev: string, curr: { value: string }) => prev + Number(curr.value),
        0
      );
      if (sum === 0) {
        state.fenxi.total = 0;
      } else {
        state.fenxi.total = sum;
      }
      for (let i = 0; i < res.data.length; i++) {
        let str = res.data[i].key.split("-")[0];
        if (str == "一级") {
          state.fenxi.level1 = res.data[i].value;
        }
        if (str == "二级") {
          state.fenxi.level2 = res.data[i].value;
        }
        if (str == "三级") {
          state.fenxi.level3 = res.data[i].value;
        }
        if (str == "四级") {
          state.fenxi.level4 = res.data[i].value;
        }
      }
    }
  });
}

//应急预案总数
function getYJTotal() {
  emergencyPlanAPI().then((res) => {
    state.yingji.total = parseInt(res.data[res.data.length - 1].value);
  });
}

//应急预案个数
function getYJEach() {
  nummergencyPlansAPI().then((res) => {
    let arr = res.data;
    let json1: { [key: string]: any } = {};
    for (let i = 0; i < arr.length; i++) {
      let str = arr[i].key.split("-")[0];
      json1[str] = Number(json1[str] || 0) + Number(arr[i].value);
    }
    state.yingji.each = Object.keys(json1).map((key) => ({
      name: key,
      value: json1[key], // 将值转换为字符串，以匹配所需的格式
    }));
  });
}
</script>
<style scoped lang="less">
// 样式引入
@import url("../styles/aqgl.less");

.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.left {
  /* background-color: #ccc; */
}

.just {
  width: 100%;
  display: flex;
  height: 160px;
}

#left1 {
  width: 160px;
}

.pump {
  flex: 1;
  height: 100%;
  position: relative;
}

.pump img {
  height: 136px;
  margin-top: 10px;
}

.pump .com-shui {
  position: absolute;
  font-size: 14px;
  height: 26px;
  padding-left: 50px;
  display: flex;
  justify-content: space-between;
  width: 185px;
}

.com-shui div {
  height: 100%;
  line-height: 26px;
  color: #fff;
}

.shuizhi1 {
  /* color: #35ccff; */
  top: 15px;
  height: 100%;
  line-height: 1;
}

.shuizhi2 {
  /* color: #00efff; */
  top: 64px;
}

.erji-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.erji-item {
  width: 238px;
  height: 80px;
  display: flex;
}

.erji-item .img-icon {}

.erji-item-txt {
  flex: 1;
}

.erji-jinshui {
  background: url(../assets/changcheng/bengbg.png) no-repeat;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  color: #fff;
  padding-left: 7px;
  margin-top: 15px;
}

.erji-data {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 22px;
  color: #ffeda8;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.wanhao {
  display: flex;
  height: 40px;
  border: 1px solid blue;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 10px;
  color: #fdfeff;
  font-style: normal;
}

.wanhao-l {
  width: 160px;
  border: 1px solid blue;
}

.wanhao-r {
  flex: 1;
  border: 1px solid blue;
}

.wanhao-bg {
  background: url(../assets/changcheng/wanhaoicon.png) no-repeat;
}

.wanhao-font {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 14px;
  color: #4dcdff;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 5px;
}

.qushi {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #cae5ff;
  line-height: 18px;
  font-style: normal;
}

.qushitu {
  height: 150px;
  width: 100%;
  border: 1px solid red;
}

.shebeiweixiutu {
  height: 100%;
  border: 1px solid red;
  width: 194px;
}

.shuizhi3 {
  color: #24eacd;
  top: 114px;
}

.weixiu {
  display: flex;
  height: 178px;
}

.weixiu-item {
  flex: 1;
}

.goto {
  position: absolute;
  top: 0;
  left: 40px;
  height: 45px;
  width: 112px;
  border-bottom: 1px solid rgb(0, 0, 255);
}

.level-all {
  div {
    width: 400px;
    height: 30px;
    line-height: 0px;
    border-radius: 50px;
    // background-color: #0bd8d16c;
    background-image: linear-gradient(to right, #0bd8d16c, #0bd8d12c);
    padding: 20px 30px;
    margin-bottom: 28px;
    color: #0bd8d1;
    display: flex;
    justify-content: space-between;
  }

  .level-1 {}

  .level-2 {}

  .level-3 {}

  .level-4 {}
}

.option-bar-v2 {
  width: 212px;
  height: 8px;
  border-radius: 10px;
}
</style>
